// 如果想使用jsx 在使用的文件中必须引入 react
import React from 'react';
import './demo01.css'

let users = [{name: '小丸子', sex: 2}, {name: '灰太狼', sex: 1}, {name: '喜洋洋', sex: 2},];


/*函数式组件*/
function Demo01() {
  return <div>
    <h1>哈哈哈哈</h1>
    <h2>嘿嘿</h2>
    <p>文本</p>
    <button className='btn' >按钮</button>

    <div>
      <label htmlFor="username">用户名</label>
      <input id='username' type="text"/>
    </div>

    <div>
      <label htmlFor="check">多选</label>
      <input id='check' type="checkbox"/>
    </div>

    {/*{{name:'123'}}*/}
    {<div>dfsafasd</div>}

    <ul>
      {/*写逻辑*/}
      {
        users.map((item, index) => <li key={index}>
          <div style={{color: 'red'}}>{item.name}</div>
          <div>{item.sex === 1 ? '男' : '女'}</div>
        </li>)
      }

      {/*<li></li>*/}
      {/*<li></li>*/}
      {/*<li></li>*/}
    </ul>
  </div>
}

/*
* html 属于 xml
* */
export default Demo01
